<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件通信</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="app">
  <!-- 1.1 默认插槽 提供内容-->
  <el-test>哈哈哈</el-test>
  <hr><hr>
  <!-- 2.1 具名插槽 -->
  <el-test>
    <p slot="yy">我命由我不由天</p>
  </el-test>
  <!-- 3.1 作用域插槽 -->
  <el-test>
    <!-- scopes是一个形参可以随便写 -->
    <!-- <template slot="rr" slot-scope="scopes">
      <div>uu的值是{{scopes}}</div>
      <div>uu的值是{{scopes.uu}}</div>
      <div>用户名是{{scopes.user.name}}--年龄是--{{scopes.user.age}}</div>
    </template> -->
    <template slot="table" slot-scope="scopes">
      <div>uu的值是{{scopes.row}}</div>
    </template>
  </el-test>
</div>
<script>
  // 组件三要素 插槽
  // 1 默认插槽
  // 2 具名插槽
  // 3. 作用域插槽 1. 需要使用默认插槽或具名插槽提供坑位 2. 提供数据
  Vue.component('el-test', {
    data () {
      return {
        user: {name: 'zs', age: 18 }
      }
    },
    template: `<div>
      <h2>我是el-test组件</h2>
      <!-- 1.2 默认插槽 提供坑位-->
      <!-- <slot name="default"></slot>-->
      <slot name="default"></slot>
      ------<br>
      <!-- 2.2 具名插槽 提供一个有名字坑位-->
      <slot name="yy"></slot>
      <!-- 3.2 作用域插槽 = 插槽+数据 -->
      <slot name="tt" uu="18" :user="{name: 'zs', age: 18 }"></slot>
      <slot name="rr" :user="user"></slot>
      <slot name="table" :row="user"></slot>
    </div>`
  })
  var vm = new Vue({
    el: '#app'
  })
</script>
</body>
</html>
